<template>
	<div id="home">
		<!-- <h3>home</h3> -->
		
		<!-- 轮播 -->
		<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
		  <van-swipe-item v-for="(item,index) of banner" :key="item._id">
			  <img class="img_home" :src="item.pic" :to="`/detail/${item._id}?collectionName=banner1`"/>
		  </van-swipe-item>
		</van-swipe>
		
		
		
		<!--列表信息 -->
		<van-cell-group>
		  <van-cell 
		  v-for="(item,index) of list.data" 
		  :key="item._id" :title="item.title"  
		  :label="item.detail.auth"
		  :to="`/detail/${item._id}?collectionName=home`"
		  />
		</van-cell-group>
		
	</div>
</template>

<script>
// axios为什么不用引入,因为把axios绑定在vue的实例上
	export default {
		name:'Home',
		data(){
			return {
				banner:[],
				list:''
			}
		},
		methods:{
			// todetail(){
			// 	this.$route.push(`/detail/${item._id}?collectionName=home`)
			// }
		},
		computed:{},
		mounted() {
			
			// console.log('路由信息:',this.$route.query.data);
			this.list=this.$route.query
			// console.log("list信息:",this.list);
			
			
			// console.log(111);
			this.$axios({
				url:"/news/banner2",
				params:{_limit:5},
				headers:{token:'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6IuWwj-WNoiIsIl9pZCI6IjYwZTI1OGNkMWNiNjhiM2FjYzdlMGY0OCIsImlhdCI6MTYyNTQ0NjcxMCwiZXhwIjoxNjI1NTMzMTEwfQ.5tiB2OHkVp1G_hV-he84VVfcPYQ73NT9kCFXXYJNybg'}
			}).then(
				res=>{
					this.banner=res.data.data
					}
				).catch(err=>console.log(err))
		},
	}
	
</script>

<style scoped>
	 .my-swipe .van-swipe-item {
	    color: #fff;
	    font-size: 20px;
	    line-height: 150px;
	    text-align: center;
	    background-color: #fffff;
		margin-top: 30px;
		height: 220px;
		/* height: 50px; */
	  }
	  .img_home{
		  height: 100%;
		  width: 100%;
		  /* background-repeat: no-repeat;
		  background-size:contain */
		  
	  }
</style>
